<template>
  <div>
    <h2 style="text-align: center">个人信息修改</h2>
    <el-form ref="form" label-width="100px" v-model="employee" :rules="rule">

      <el-row>
        <el-col :span="6">
          <el-form-item label="员工id">
            <el-input v-model="employee.userId" disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item label="活动区域">-->
        <!--            <el-select v-model="employee.userId" placeholder="请选择活动区域">-->
        <!--              <el-option label="区域一" value="shanghai"></el-option>-->
        <!--              <el-option label="区域二" value="beijing"></el-option>-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="6">
          <el-form-item label="员工姓名" >
            <el-input v-model="employee.username"disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="员工性别" prop="gender">
            <el-input v-model="employee.gender" maxlength="1"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="民族" prop="nationId">
            <el-input v-model="employee.nationId" maxlength="4" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="政治面貌" prop="politicaltype">
            <el-input v-model="employee.politicaltype" maxlength="5" ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="地址" prop="address">
            <el-input v-model="employee.address"   maxlength="25" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="Idcards">
            <el-input v-model="employee.idcard"  maxlength="18"  ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话号码：" prop="phone">
            <el-input v-model="employee.phone"  maxlength="11" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最高学历" prop="education">
            <el-input v-model="employee.education" maxlength="16" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="专业" prop="educationsubject">
            <el-input v-model="employee.educationsubject" maxlength="16">

            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业院校" prop="school">
            <el-input v-model="employee.school" maxlength="16" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="部门id">
            <el-input v-model="employee.departmentId" disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门名称">
            <el-input v-model="employee.departmentName" disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="个人工号">
            <el-input v-model="employee.workId" disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="职位">
            <el-input v-model="employee.workName" disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="基本工资">
            <el-input v-model="employee.baseSalary" disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="emails">
            <el-input v-model="employee.email"   prop="address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button @click="change">提交信息</el-button>
        <el-button @click="returnlogin">返回首页</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import {reloadEmployees} from '../viewjs/personal_informationHandler'
  export default {
    name: "person_information_change",
    data() {
      return {
        employee: {
          userId: "",
          username: "",
          idcard:"",
          gender: "",
          email:"",
          politicaltype: "",
          nationId: "",
          address: "",
          phone: "",
          education: "",
          educationsubject: "",
          school: "",
          departmentId: "",
          departmentName: "",
          workId: "",
          workName: "",
          baseSalary:""
        },

        rule:{
          gender:[{required:true,message:"输入男/女",trigger:"blur"}],
          Idcards:[{required:true,message:"输入18位身份证号",trigger:"blur"}],
          politicaltype:[{required:true,message:"输入政治面貌",trigger:"blur"}],
          nationId: [{required:true,message:"输入民族",trigger:"blur"}],
          address: [{required:true,message:"输入地址",trigger:"blur"}],
          phone: [{required:true,message:"输入11位电话号码",trigger:"blur"}],
          education: [{required:true,message:"输入最高学历",trigger:"blur"}],
          educationsubject: [{required:true,message:"输入专业",trigger:"blur"}],
          school: [{required:true,message:"输入毕业院校",trigger:"blur"}],
          emails:[{required:true,message:"输入格式xx@%%.com",trigger:"blur"}],
        }
      }
    },

    mounted(){
      this.reloadEmployees()
    },
    methods:{

      reloadEmployees,

      change()
      {
        this.$axios.post("/updateAcceptDepartmentById",{
          userId:this.employee.userId,
          userName: this.employee.username,
          email:this.employee.email,
          gender: this.employee.gender,
          idcard: this.employee.idcard,
          politicaltype: this.employee.politicaltype,
          nationId: this.employee.nationId,
          address: this.employee.address,
          phone: this.employee.phone,
          education: this.employee.education,
          educationsubject: this.employee.educationsubject,
          school: this.employee.school,
        }).then((res)=>{
          if(res.status == 200)
          {

                this.$message.success(res.data.msg)
            this.$store.commit("setviewPage",2);
            this.$router.push({path:"/personal_information"})
            }
          else{
            this.$message.error(res.data.msg)
          }
        })
      },
      returnlogin(){
        this.$store.commit("setviewPage",1);
        this.$router.push({path: '/home'});
      }
    }
  }
</script>

<style scoped>

</style>
